<!-- 项目总览左下角图例 -->
<template>
  <div class="panel_box">
    <div class="flex items-end h-[180px] w-[180px]">
      <img
        src="@/assets/imgs/lefticon.png"
        class="w-[33px] h-[33px] mr-2 cursor-pointer"
        @click="handelClick"
      />
      <div v-if="choseStatus" class="left_bottom_content">
        <span>项目状态图例</span>
        <div class="hidden_card">
          <div
            class="content flex items-center justify-around"
            v-for="(item, index) in option"
            :key="index + 'btm'"
            @click="handel(index)"
          >
            <span
              v-if="item.color"
              class="round"
              :style="{ backgroundColor: item.color }"
            ></span>
            <img class="w-[19px] h-[19px]" :src="item.img" alt="" />
            <span
              :style="{ fontSize: choseid == 1 ? '9' : '' }"
              class="w-[77px] overflow-hidden text-left"
            >
              {{ item.name }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import img51 from "@/assets/imgs/left1.png";
import img52 from "@/assets/imgs/left2.png";
import img53 from "@/assets/imgs/left3.png";
import img54 from "@/assets/imgs/left4.png";
import img55 from "@/assets/imgs/left5.png";
import img56 from "@/assets/imgs/left6.png";
import img57 from "@/assets/imgs/left7.png";
import img58 from "@/assets/imgs/left8.png";
import { ref } from "vue";
const option = [
  {
    name: "公共服务",
    // color: "#7100FD",
    img: img51,
  },
  {
    name: "信息化",
    // color: "#41CAC3",
    img: img52,
  },
  {
    name: "文化类",
    // color: "#3337FD",
    img: img53,
  },
  {
    name: "市政类",
    // color: "#3A3A3A",
    img: img54,
  },
  {
    name: "公共绿地",
    // color: "#4AFD86",
    img: img55,
  },
  {
    name: "文体类",
    // color: "#272E57",
    img: img56,
  },
  {
    name: "教育类",
    // color: "#F79F1E",
    img: img57,
  },
  {
    name: "社会投资",
    // color: "#217F43",
    img: img58,
  },
];
const choseStatus = ref(false);

// 点击
const handelClick = () => {
  choseStatus.value = !choseStatus.value;
};
</script>
<style lang="scss" scoped>
.left_bottom_content {
  width: 145px;
  height: 180px;
  background-image: url("@/assets/imgs/tl.png");
  background-size: 100% 100%;

  color: white;
  text-align: center;
  padding-block: 10px;
  padding-inline: 5px;
}
.hidden_card {
  overflow: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 140px;
  .content {
    width: 100%;
    height: 33px;
    line-height: 33px;
    cursor: pointer;
    margin-bottom: 2px;
    line-height: 33px;
    font-size: 12px;
    .round {
      width: 13px;
      height: 12px;
      border-radius: 10px;
    }
  }
}
</style>
